<template lang="pug">
el-drawer.commonDrawer(
  title="我的素材",
  :visible.sync="visibleDialog",
  v-loading="loading",
  custom-class="commonDrawer",
  direction="rtl",
  size="640px",
  append-to-body,
  destroy-on-close,
  modal-append-to-body
)
  .drawer-content
    el-row(:gutter="30", v-if="list.length > 0")
      el-col(v-for="(course, index) in list", :span="12", :key="course.id")
        item(:detail="course", :isMy="true")
  .drawer-footer.tr
    i-pagination(
      v-if="pagination.total > 0",
      @paginationFun="paginationFun",
      :total="pagination.total",
      :pageNum="pagination.pageNum",
      :pageSize="pagination.pageSize"
    )
</template>
<script>
import { mapGetters } from 'vuex'
import IPagination from '@/components/Basic/PaginationTwo'
import { getDocList } from '../api'
import Item from './item'

export default {
  components: {
    IPagination,
    Item
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      list: [],
      pagination: {
        total: 0,
        pageSize: 8,
        pageNum: 0
      }
    }
  },
  computed: {
    ...mapGetters(['curArea', 'user']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList (values) {
      const { curArea, pagination, user } = this
      const { pageSize, pageNum } = pagination
      this.loading = true
      getDocList({ dirType: 4, createdBy: user.id, areaId: curArea.areaId, pageSize, pageNum, ...values }).then(res => {
        console.log(res)
        this.pagination = {
          total: res.totalElements,
          pageNum: res.number,
          pageSize: pageSize
        }
        this.list = res.content
      }).finally(() => {
        this.loading = false
      })
    },
    // 分页
    paginationFun (val) {
      this.pagination.pageNum = val
      this.getData()
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 0 24px;
  height: calc(100vh - 76px);
  overflow-y: auto;
}
</style>
